<template>
  <div class="container">
    <!-- 操作栏 -->
    <Header :showRefresh="false" @refresh="() => {}">
      <template #leftTitle> 【目录级联审批】 </template>
    </Header>
    <div class="page-main">
      <div class="page-main-query all-search">
        <FilterBar :showBack="true" @route="goBack" />
      </div>
      <!-- 基本信息 -->
      <InfoArea :data="info" />
      <!-- 技术信息 -->
      <TechnologyInfo :data="technologyInfo" />
      <!-- 手风琴 -->
      <el-collapse v-model="activeNames" @change="handleCollapseChange">
        <el-collapse-item title="请求参数" :name="1">
          <RequestParams :data="requestParams" />
        </el-collapse-item>
        <el-collapse-item title="Path" :name="2">
          <Path :data="path" />
        </el-collapse-item>
        <el-collapse-item title="请求参数（query）" :name="3">
          <RequestQueryParams :data="requestQueryParams" />
        </el-collapse-item>
        <el-collapse-item title="请求参数（Body）" :name="4">
          <RequestBodyParams :data="requestBodyParams" />
        </el-collapse-item>
        <el-collapse-item title="响应（Response）" :name="5">
          <Response :data="response" />
        </el-collapse-item>
        <el-collapse-item title="请求示例" :name="6">
          <RequestExample :data="requestExample" />
        </el-collapse-item>
        <el-collapse-item title="正常返回示例" :name="7">
          <SuccessReturnExample :data="successReturnExample" />
        </el-collapse-item>
        <el-collapse-item title="失败返回示例" :name="8">
          <ErrorReturnExample :data="errorReturnExample" />
        </el-collapse-item>
        <el-collapse-item title="失败码定义" :name="9">
          <ErrorCode :data="errorCode" />
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script lang="jsx">
import { ref, onMounted, defineComponent, reactive, toRefs } from "vue";
import Header from "@/components/Header.vue";
import FilterBar from "@/components/FilterBar.vue";
import {
  InfoArea,
  RequestParams,
  Path,
  RequestQueryParams,
  RequestBodyParams,
  Response,
  RequestExample,
  SuccessReturnExample,
  ErrorReturnExample,
  ErrorCode,
  TechnologyInfo
} from './detailComponents/index.js';
import { useRouter, useRoute } from 'vue-router';
import { getDataSourceDetail } from "@/api/adaptation";
export default defineComponent({
  name: "CascadeApplyDetail",
  components: {
    InfoArea,
    Header,
    FilterBar,
    RequestParams,
    Path,
    RequestQueryParams,
    RequestBodyParams,
    Response,
    RequestExample,
    SuccessReturnExample,
    ErrorReturnExample,
    ErrorCode,
    TechnologyInfo
  },
  setup(props, { emit, slots }) {
    const router = useRouter()
    const route = useRoute()
    const goBack = () => {
      router.back()
    }

    const info = reactive({
      name: '内容展位',
      applyPlatform: '内容展位',
      supplyPlatform: '内容展位',
      deptName: '内容展位',
      extra: '内容展位',
      applyName: '内容展位',
      applyPhone: '内容展位',
      requestParams: [],
      path: [],
      requestQueryParams: [],
      requestBodyParams: [],
      response: [],
      requestExample: null,
      successReturnExample: null,
      errorReturnExample: null,
      errorCode: [{},{},{}],
      technologyInfo: {}

    })
    const getInfo = async() => {
      const res = await getDataSourceDetail(route.params.id)
    }
    const activeNames = ref([1,2,3,4,5,6,7,8,9])
    const handleCollapseChange = () => {

    }
    onMounted(() => {

    });

    return {
      info,
      ...toRefs(info),
      activeNames,
      goBack,
      handleCollapseChange
      
    };
  },
});
</script>
<style lang="scss" scoped>
.table-container {
  height: calc(100% - 270px);
}
footer {
  text-align: right;
  margin-top: 20px;
}
</style>